<template>
	<view>
		<view class="detail-page">
			<view class="detail-conter">
				<u-navbar title="" :bgColor="'#fff0'" @rightClick="$Router.back" :autoBack="true"></u-navbar>
				<view class="data-top">
					<view class="productSort_block">
						<view class="productSort_block_left">
							<view class="productSort_block_left_xh">{{ datailObj.title }}</view>
						</view>
						<view class="productSort_block_last">
							<view class="productSort_block_last_item">
								<view class="last_item_text">{{ (datailObj.avgRate*365).toFixed(2) }}%</view>
								<view style="font-size: 12px; color: rgb(153, 153, 153)">{{ $t('category.c9') }}</view>
							</view>
							<view class="productSort_block_last_item">
								<view class="last_item_text">
									<text style="font-size: 12px; margin-right: 10px; color: #999">{{ $t('category.c15') }}</text>
									<text style="font-weight: bold; font-size: 15px">{{ datailObj.days }}{{ $t('category.c10') }}</text>
								</view>
								<view style="font-size: 12px; color: rgb(153, 153, 153)">
									<text style="margin-right: 10px">{{ $t('category.c16') }}</text>
									<text style="font-weight: bold; color: #ff6241; font-size: 15px">{{ datailObj.remainAmount }}</text>
								</view>
							</view>
						</view>
						<view class="fengxian1">
							<text class="texts">{{ $t('category.c17') }}</text>
							<text class="texts">{{ $t('category.c18') }}</text>
							<text class="texts">{{ datailObj.timeLimit }}{{ $t('category.c19') }}</text>
						</view>
						<view class="jindu">
							<view class="jindu-left">{{ $t('category.c20') }}</view>
							<view class="jindu-center">
								<u-line-progress
									:showText="false"
									:activeColor="'rgb(255, 37, 0)'"
									:inactiveColor="'rgb(243, 240, 246)'"
									:percentage="datailObj.process"
									height="6"
								></u-line-progress>
							</view>
							<view style="font-size: 12px; color: rgb(102, 102, 102); margin-left: 10px">{{ datailObj.process }}%</view>
						</view>
					</view>
				</view>
			</view>
			<view class="datail-taba">
				<u-tabs
					:current="indexTaba"
					:list="list1"
					:lineWidth="40"
					:inactiveStyle="inactiveStyle"
					:activeStyle="activeStyle"
					:lineColor="'#ff3738'"
					:itemStyle="itemStyle"
					@click="clicktabs"
				></u-tabs>
			</view>
			<view v-if="indexTaba == 0" style="padding: 0px 10px">
				<view class="detacon_quxian">
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c21') }}</view>
						<view class="quxian_content_ringtht">{{ datailObj.title }}</view>
					</view>
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c22') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{ datailObj.process }}%</view>
					</view>
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c23') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{ datailObj.totalInvestAmount }}</view>
					</view>
					<view class="detacon_quxian_content">
						<!-- 项目名称 title 进度process  总额totalInvestAmount 剩余remainAmount 限购次数timeLimit -->
						<view class="quxian_content_left">{{ $t('category.c16') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{ datailObj.remainAmount }}</view>
					</view>
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c9') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{  (datailObj.avgRate*365).toFixed(2)}}%</view>
					</view>
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c26') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{ $t('category.c27') }}{{ datailObj.timeLimit }}{{ $t('category.c28') }}</view>
					</view>
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c29') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{ $t('category.c30') }}</view>
					</view>
					<view class="detacon_quxian_content">
						<view class="quxian_content_left">{{ $t('category.c31') }}</view>
						<view class="quxian_content_ringtht" style="color: #000000">{{ $t('category.c32') }}</view>
					</view>
				</view>
				<view style="padding: 0px 20px">
					<view style="display: flex; align-items: center">
						<!-- <view class="botton_bon botton_bon2" @click="$Router.push({ path: '/pages/category/pay', query: { id: '11', type: 'CRY' } })">人名币下单</view> -->
						<view class="botton_bon" @click="$Router.push({ path: '/pages/category/pay', query: { id: ID, type: 'USDT' } })">{{ $t('category.c13') }}</view>
					</view>
				</view>
				<view style="height: 90px; width: 100%"></view>
			</view>
			<view v-if="indexTaba == 1" style="padding: 0px 10px">
				<view class="detacon_quxian">
					<view class="detacon_quxian_content">
						<!-- <view class="title">{{rulesData[0].title}}</view> -->
						<!-- <view v-html="rulesData[0].content"></view> -->
						<u-parse :content="rulesData[0].content"></u-parse>
					</view>
				</view>
			</view>
			<view v-if="indexTaba == 2" style="padding: 0px 10px">
				<view class="detacon_quxian">
					<view class="item-collapseitem">
						
						<u-collapse style="width: 100%" v-for="(item, index) in rulesData" @change="change" @close="close" @open="open">
							<view class="itemtitle">
								{{item.title}}
							</view>
							<u-collapse-item 
							v-for="(bn, index) in item.infoList"  
							:key="bn.id"
							:title="bn.question" name="Docs guide">
								<text class="u-collapse-content">
									<view class="" style="text-indent: 2em">
										<u-parse :content="bn.content"></u-parse>
									</view>
								</text>
							</u-collapse-item>
						</u-collapse>
						
					</view>
				</view>
				<view class="" style="height: 100rpx;">
					
				</view>
			</view>
		</view>

		<FooterNav :modelKey="2" />
	</view>
</template>
<script>
import FooterNav from '@/components/footer-nav/footer-nav.vue';

import { financialDetail, optionrules, helpcenterlist } from '@/api/index.js';
export default {
	components: {
		FooterNav
	},
	props: {},
	data() {
		return {
			indexTaba: 0,
			itemStyle: {
				width: '33%',
				height: '44px'
			},
			inactiveStyle: {
				color: '#646566',
				fontSize: '13px'
			},
			activeStyle: {
				color: '#000',
				fontSize: '14px',
				fontWeight: '600'
			},
			ID: '',
			datailObj: {},
			rulesData: [],
			list1: [
				{
					name: this.$t('category.c34'),
					id: 'all'
				},
				{
					name: this.$t('category.c35'),
					id: 'all1'
				},
				{
					name: this.$t('category.c36'),
					id: 'all2'
				}
			]
		};
	},
	watch: {},
	onLoad(parameter) {
		this.ID = parameter.id;
		console.log(parameter, 'parameter');
	},
	computed: {},
	onShow() {
		this.init();
	},
	methods: {
		async init() {
			let res = await financialDetail({ id: this.ID });
			if (res.code == 200) {
				this.datailObj = res.data;
			}
			let obj = {
				lang: this.$store.getters.lang,
				key: this.indexTaba == 2 ? 20 : 8
			};

			if (this.indexTaba == 2) {
				let helpcenter = await helpcenterlist();
				this.rulesData = helpcenter.data;
			} else {
				let rulesData = await optionrules(obj);
				this.rulesData = rulesData.data;
			}
		},
		clicktabs(e) {
			this.indexTaba = e.index;
			console.log(e.index, 'eee');
			this.init();
		},
		open(e) {
			// console.log('open', e)
		},
		close(e) {
			// console.log('close', e)
		},
		change(e) {
			// console.log('change', e)
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background-color: #f2f1f6;
}
::v-deep.u-tabs__wrapper__nav__item__text {
	text-align: center;
}
.detail-page {
	.detail-conter {
		width: 100%;
		padding: 15px 0;
		background-image: url('@/static/imgs/bfrcpng.png');
		background-repeat: no-repeat;
		background-size: 100% 175px;
		.data-top {
			padding: 0px 10px;
			.productSort_block {
				border-radius: 8px;
				margin-top: 46px;
				position: relative;
				width: 100%;
				background-color: #fff;
				padding: 20px 10px;
				margin-bottom: 10px;
				.productSort_block_left {
					display: flex;
					align-items: center;
					padding-left: 9px;
					margin-bottom: 6px;
					.productSort_block_left_xh {
						font-size: 15px;
						font-family: Microsoft YaHei;
						font-weight: 700;
						color: #333;
					}
				}
				.productSort_block_last {
					padding: 0 9px;
					align-items: center;
					display: flex;
					justify-content: space-between;
					.productSort_block_last_item {
						width: 50%;
						.last_item_text {
							display: flex;
							font-size: 20px;
							font-weight: bold;
							color: rgb(255, 98, 65);
							margin-bottom: 6px;
							// height: 30px;
							// line-height: 30px;
						}
					}
				}

				.fengxian1 {
					display: flex;
					align-items: center;
					padding: 9px;
					.texts {
						border: 0.5px solid #ff6241;
						color: #ff6241;
						padding: 2px 4px;
						border-radius: 4px;
						margin-right: 10px;
						font-size: 9px;
					}
				}
				.jindu {
					display: flex;
					align-items: center;
					margin-top: 20px;
					padding: 0px 9px;
					.jindu-left {
						color: rgb(153, 153, 153);
						width: 60px;
						font-size: 12px;
					}
					.jindu-center {
						width: 60%;
						height: 6px;
						background-color: rgb(243, 240, 246);
						border-radius: 6px;
					}
				}
			}
		}
	}
	.datail-taba {
		background-color: #fff;
	}
	.detacon_quxian {
		margin-top: 10px;
		border-radius: 8px;
		padding: 15px;
		background-color: #fff;

		.detacon_quxian_content {
			display: flex;
			align-items: center;
			margin-top: 20px;
			font-size: 13px;
			justify-content: space-between;
			.quxian_content_left {
				color: rgb(102, 102, 102);
			}
			.quxian_content_ringtht {
				color: rgb(0, 0, 0);
				max-width: 200px;
				text-align: right;
			}
		}
		.item-collapseitem {
			margin-top: 20px;
			font-size: 13px;
			.itemtitle{
				font-size: 14px;
				font-weight: bold;
			}
		}
	}
	.botton_bon {
		flex: 1 1 0%;
		// margin-right: 24px;
		margin-top: 30px;
		border-radius: 8px;
		line-height: 40px;
		text-align: center;
		font-size: 15px;
		font-weight: bold;
		color: rgb(255, 255, 255);
		background: linear-gradient(to right, rgb(255, 98, 65), rgb(255, 98, 65), rgb(255, 55, 56));
	}
	.botton_bon2 {
		border: 1px solid rgb(255, 98, 65);
		color: rgb(255, 98, 65);
		background: #fff0;
	}
}
</style>
